<template>
  <!-- 抽取任务详情 -->
  <div class="detail-wrap">
    <div class="title">
      {{ taskName
      }}<el-button type="primary" @click="goBack" class="back-btn" size="mini"
        >返回</el-button
      >
    </div>
    <TableComp
      style="margin-top: 20px"
      ref="multipleTable"
      :tableData="tableData"
      :tableConfig="modelId == 6 ? tableConfigInfrared : tableConfig"
      :tableAction="tableAction"
      :isSelect="false"
      :isIndex="true"
      :isShowPage="true"
      :queryParams="queryParams"
      @getPagination="initData"
    >
      <template v-slot:oriFile="scope">
        <img
          v-if="scope.row.modelId != 10 && scope.row.modelId != 9"
          style="width: 100px; height: 100px"
          :src="scope.row.oriFile"
          fit="fill"
        /><span v-else>{{ getCSVName(scope.row.oriFile) }}</span></template
      >
      <template v-slot:drawImage="scope">
        <img style="width: 100px" :src="scope.row.drawImage" fit="fill"
      /></template>
      <template v-slot:histogramImage="scope">
        <img style="width: 100px" :src="scope.row.histogramImage" fit="fill"
      /></template>
      <template v-slot:irFeatureImage="scope">
        <img style="width: 100px" :src="scope.row.irFeatureImage" fit="fill"
      /></template>
    </TableComp>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      queryParams: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      tableAction: {
        align: () => 'center',
        width: () => String(60 * 2),
        operations: [
          {
            label: '查看',
            isLink: true,
            type: 'primary',
            method: (row) => {
              this.$router.push({
                path: `/knowledgeGeneration/extractType/taskCompareDetail/${row.modelId}/${row.id}`,
              });
            },
          },
          {
            label: '删除',
            isLink: true,
            type: 'danger',
            method: (row) => {
              this.delete([row.id]);
            },
          },
        ],
      },
      tableConfig: [
        {
          prop: 'oriFile',
          label: '原始文件',
          isSlot: true,
        },
        {
          prop: 'drawImage',
          label: '抽取结果',
          isSlot: true,
        },
      ],
      tableConfigInfrared: [
        {
          prop: 'oriFile',
          label: '原始文件',
          isSlot: true,
        },
        {
          prop: 'histogramImage',
          label: '红外辐射强度直方图',
          isSlot: true,
        },
        {
          prop: 'irFeatureImage',
          label: '红外辐射强度热特征图',
          isSlot: true,
        },
      ],
    };
  },
  computed: {
    taskName() {
      return this.$route.params.name;
    },
    taskId() {
      return this.$route.params.id;
    },
    modelId() {
      return this.$route.params.modelId;
    },
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      let formData = new FormData();
      formData.append('modelId', this.modelId);
      formData.append('extractionDataRecordId', this.taskId);
      formData.append('pageNum', this.queryParams.currentPage);
      formData.append('pageSize', this.queryParams.pageSize);
      let params = new URLSearchParams(formData);
      this.$api.knowledgeGeneration.imageList(params).then((res) => {
        const { data, code } = res.data;
        if (code == 200) {
          this.tableData = data.records;
          this.queryParams.total = data.total;
        }
      });
    },
    // 获取csv文件名
    getCSVName(path) {
      let last = path.lastIndexOf('/');
      let str = path.substring(last + 1);
      return str;
    },
    goBack() {
      this.$router.push('/knowledgeGeneration/extractType');
    },
    // 删除
    delete(row) {
      this.$confirm('此操作将删除此数据，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$api.knowledgeGeneration
          .imageDelete({ idList: row.id })
          .then((res) => {
            const { data, message, code } = res.data;
            if (code === 200) {
              this.initData();
              this.$message.success(message);
            } else {
              this.$message.warning(message);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-wrap {
  margin-top: 16px;
  padding: 16px 32px 64px;
  background: #ffffff;
  border-radius: 4px;
  position: relative;
  .title {
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 16px;
    .back-btn {
      position: absolute;
      right: 32px;
    }
  }
}
</style>
